<template>
	<view>
		<u-navbar title='选择材料' leftIconColor="white" :autoBack="true" :bgColor="color" titleStyle="color:white" :placeholder="true"></u-navbar>
		<view class="materialTitle" style="">
			<view style="width:300rpx;">材料名称</view>
			<view style="width:80rpx;">单位</view>
			<view style="width: 100rpx;">价格</view>
			<view style="width:270rpx">数量</view>
		</view>
		<view style="padding-bottom:300rpx;text-align: center;font-size: 14px;" v-if="materialList.length > 0">
			<view v-for="(v,i) in materialList" :key="v.classificationId"
				v-if='!disabledClassificationIdList.includes(v.classificationId)'
				class="item"
				style="">
				<view style="width: 300rpx;text-align: center;padding-right:30rpx;position: relative;">{{v.name}}
					<view v-if="v.isDiscd !== 1" class="disCountTag" :style="{'background':color}">
						补
					</view>
				</view>
				<view style="widt:450rpx;display: flex;align-items: center;">
					<view style="width: 80rpx;">
						{{v.unit}}
						<!-- <view class="" v-if="v.discount == 1"> 
							<u-tag text="暂无" plain size="mini"></u-tag>
						</view>
						<view v-else>
							<u-tag text="补贴" plain size="mini"></u-tag>
						</view> -->
					</view>
					<view style="width: 100rpx;" :style="{color:color}">{{v.salePrice}}</view>
					<view style="width: 270rpx;display: flex;justify-content: center;">
						<!-- <u-number-box @change='countChange' button-size="20" :color="color" integer='true' v-model="v.buyCount" min="0">
						</u-number-box> -->
						<uni-number-box v-model="v.buyCount" :max='100000'  :min="0"></uni-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="createPrevieOrder">
			<u-button :color='color' shape="circle" @click="createPrevieOrder">创建订单</u-button>
		</view>
		<u-popup :show='previewShow' @close="close" round='10' >
			<view style="padding:20rpx 20rpx;font-size: 12px;">
			    <view style="text-align: center;font-size: 14px;font-weight: 700;margin-bottom:20rpx">{{userInfo.storeName}}</view>
				 <view class='preInfo'>
				 	<view>总价:{{totalAmount.totalPrice}}</view>
				 	<view>折扣:{{totalAmount.subAmount}}</view>
				     <view :style="{'color':color}">实付:{{totalAmount.disPrice}}</view>
				 </view>
				<view class='preInfo'>
					<view>姓名:{{userInfo.storeContacts}}</view>
					<view>电话:{{userInfo.mobile}}</view>
					<view>仓库:{{userInfo.warehouseName}}</view>
				</view>
				<view class='preInfo'>
					<view>地址:</view>
					<view>{{userInfo.storeAddress}}</view>
				</view>
				<view class='preInfo'>
					<view>备注:</view>
					<view v-if="orderType=='create'">
					<u-tag v-if='userInfo.remark' size="mini" plain :text="userInfo.remark"> </u-tag>
					<u-tag v-else size="mini" text="暂无备注"></u-tag>
					</view>
					<view v-else style="border:1rpx solid #eee;border-radius: 10rpx;">
						<u-input v-model='userInfo.remark' placeholder="请输入备注"  inputAlign="right"></u-input>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;padding-bottom:50rpx">
					<view style="width:300rpx">
						<u-button :color='color' style="width: 300px;" plain @click="previewShow = false" >取消</u-button>
					</view>
					<view style="width:300rpx">
						<u-button :color='color' style="width: 300px;"  throttleTime='10000' @click='submitOrder'>下单</u-button>
					</view>
				</view>
				 
			</view>
		</u-popup>
	</view>
</template>
<script>
	let app = getApp();
	export default{
		data(){
			return{
				color:app.globalData.defaultColor,
				userInfo:{
					warehouseName:''
				},
				totalAmount:{},
				disabledClassificationIdList:[],
				materialList: [],
				previewShow:false,
				orderType:'',
				orderMaterialList :[]
			}
		},
	onLoad(option) {
		this.userInfo  = (JSON.parse(decodeURIComponent(option.info)));
		this.orderType= option.type;
	    if(this.orderType == 'add'){
			this.userInfo.warehouseName = this.userInfo.warehouse.warehouseName;
			this.userInfo.warehouseId = this.userInfo.warehouse.warehouseId;
			this.userInfo.saleType = 2
		}else
		{
			 this.userInfo.saleType = 1
		}
		this.getWarehouseList();
		this.disabledClassificationId();
	 },
	 methods:{
		 countChange(info){
			 console.log(info)
		 },
		 close(){
			 this.previewShow =false;
		 },
		 submitOrder(){
			 if(this.totalAmount.disPrice == 0){
				 uni.$u.toast('请选择材料!');
				 return;
			 }
			 
			uni.showModal({
				title: '提示:',
				content: `下单材料共计: ${this.totalAmount.disPrice}元,收货人电话: ${this.userInfo.mobile}`,
				success: (res) => {
					if (res.confirm) {
						let params = {
							lon: this.userInfo.lon,
							lat: this.userInfo.lat,
							storeAddress: this.userInfo.storeAddress,
							storeName: this.userInfo.storeName,
							storeContacts: this.userInfo.storeContacts,
							mobile: this.userInfo.mobile,
							materialList: this.orderMaterialList ,
							totalAmount: this.totalAmount.totalPrice,
							remark: this.userInfo.remark,
							warehouseId: this.userInfo.warehouseId,
							subAmount:this.totalAmount.subAmount,
							disPrice:this.totalAmount.disPrice,
							saleType:this.userInfo.saleType
						}
						uni.$u.http.post('/sale/weChatSaleAdd', params).then(res => {
							if (res === null) {
								uni.navigateTo({
									url:'/pages/payment/index'
								})
							}
						})
					} else if (res.cancel) {
						uni.$u.toast('取消购买材料:)');
					}
			
				}
			})
		 },
		 getWarehouseList() {
		 	let params = {
		 		pageSize: 1000000000,
		 		pageNumber: 1
		 	}
		 	uni.$u.http.get('/warehouse/warehouseList', {
		 		params: params
		 	}).then(res => {
		 	 
				res.rows.map(el=>{
					if(el.warehouseId === this.userInfo.warehouseId){
						this.userInfo.warehouseName = el.warehouseName;
					}
				})
		 	})
		 },
		 disabledClassificationId() {
		 	uni.$u.http.get('/classification/cidList').then(async res => {
		 		if (res) {
		 			res.map(el => {
		 				this.disabledClassificationIdList.push(el.classificationId)
		 			})
		 			await this.getMaterial();
		 		}
		 	})
		 },
		 createPrevieOrder(){
			 uni.$u.http.post('/sale/weChatSaleTotal',{ materialList:this.materialList}).then(res=>{
				this.totalAmount = res;
				this.orderMaterialList = this.totalAmount.materialClassVOList;
				this.previewShow= true;
			 })
		 },
		 getMaterial() {
		 	let params = {
		 		pageSize: 10000,
		 		pageNumber: 1,
		 		loading: true
		 	}
		 	uni.$u.http.get('/classification/materialList', {
		 		params: params
		 	}).then( res => {
		 		 res.rows.map(e => {
		 		 	e.buyCount = 0
					if (e.materials.length > 0) {
						e.salePrice = e.materials[0].salePrice;
					}
		 		 	let nodiscountArr =['天花射灯','泛光灯','象鼻灯','筒灯-150','筒灯-95','轨道直接头','轨道弯接头','轨道槽1.0米/根','轨道槽1.5米/根','轨道槽2.0米/根','轨道射灯']
		 		 	if (nodiscountArr.includes(e.name)) {
		 		 		e.discount = 1
		 		 	} else {
		 		 		e.discount = 0.91;
		 		 	}
		 		 })
		 		this.materialList = res.rows;
		 	})
		 }
	 }
	}
</script>
<style lang='scss' scoped>
	.materialItem:nth-child(1) {
		border-top: 0 !important;
	}
	.materialTitle {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		text-align: center;
	}
	.disCountTag {
		transform: scale(0.8);
		position: absolute;
		top: -10px;
		right: -10px;
		color: white;
		font-size: 12px;
		padding: 2px 4px;
		border-bottom-right-radius: 4px;
		border-top-left-radius: 4px
	}
	.createPrevieOrder{
		padding:30px;
		width:calc(100% - 60px);
		border-top:1px solid #eee;
		position: fixed;
        bottom:0;
		left:0;
		background-color: white;
		z-index: 1000;
	}
	.preInfo{
	   display: flex;
	   justify-content: space-between;
	   align-items: center;
	   margin-bottom: 20rpx;
	}
	.item{
		display: flex;align-items: center;padding:20rpx 0;
	}
 
   .item:nth-child(2n + 2){
	   background-color: #f0faff;
   }
</style>